<template>
  <div>
    <div class="boxs" id="payDIV">
      <div class="boxs_left"></div>
      <div class="boxs_right">
        <span class="b_title">
          <img src="../../../../assets/image/home/kjjk.png" />
        </span>
        <div class="b_form">
          <el-form label-width="80px" :model="form" action="">
            <el-form-item label="支付方式" style="margin-left: 20%;">
              <i>
                <img
                  src="../../../../assets/image/home/zhifubao.png"
                  style="height: 20px;margin-top: 8px;"
              /></i>
            </el-form-item>
            <el-form-item label="捐赠意向" style="margin-left: 20%;">
              <el-input style="width: 250px;" v-model="info"></el-input>
            </el-form-item>
            <el-form-item label="捐赠金额" style="margin-left: 20%;">
              <el-input style="width: 250px;" v-model="amount"></el-input> 元
            </el-form-item>
            <div id="" style="position: relative;margin-left: 10%;color: red;">
              (捐赠金额1元起捐，多少无拘。感谢！)
            </div>
            <br />
            <div style="margin-left: 30%;">
              <el-radio v-model="radio" label="1">匿名</el-radio>
              <el-radio v-model="radio" label="2">实名</el-radio>
            </div>
            <el-button
              type="success"
              style="margin-left: 45%;width: 120px;margin-top: 5%;"
              @click.native="pay"
              >立即捐赠</el-button
            >
            <div ref="myroot"></div>
          </el-form>
        </div>
      </div>
      <!--  -->
    </div>
    <!-- <div class="html" >

		</div> -->
  </div>
</template>

<script>
import { pay } from "network/pay";
import { payDream } from "network/dream.js";
import $ from "jquery";
import Vue from "vue";
export default {
  data() {
    return {
      radio: "1",
      id: "",
      cfId: "",
      form: {
        name: "",
        money: ""
      },
      name: "",
      money: "",
      html: "",
      info: "",
      amount: ""
    };
  },
  created() {
    this.id =
      Math.round(Math.random() * 10000000) +
      Math.round(Math.random() * 10000000);
  },
  watch: {
    html() {
      this.html = this.html;
    },
    info() {
      this.info = this.info;
    },
    amount() {
      this.amount = this.amount;
    }
  },
  mounted() {},
  methods: {
    pay() {
      //先判断登录
      if (this.$store.state.isLogin) {
        //
        //
        //

        const _this = this;
        let formData = new FormData();
        formData.append("cfId", this.$route.query.dreamId);
        formData.append("cfrAmount", this.amount);
        payDream(formData)
          .then(res => {
            console.log(res);
          })
          .catch(err => {
            console.log(err);
          });
        $.ajax({
          url: "api/sys/api/pay", //请求路径
          data: {
            amount: this.amount,
            id: this.id,
            info: this.info
          },
          /* async: false, */
          type: "POST", //GET
          //dataType: "JSON",//需要返回JSON对象(如果Ajax返回的是手动拼接的JSON字符串,需要Key,Value都有引号)
          success: function(resp) {
            //处理 resp.responseText;
            console.log(resp);
            const res = resp;
            document.querySelector("body").innerHTML = res;
            const div = document.createElement("div"); // 创建div
            div.innerHTML = res; // 将返回的form 放入div
            document.body.appendChild(div);
            document.forms[0].submit();
          },
          error: function(a, b, c) {
            //a,b,c三个参数,具体请参考JQuery API
          }
        });
        //
        //
        //
      } else {
        this.$message({
          showClose: true,
          message: "亲,你还未登录！",
          type: "warning"
        });
      }
    }
  }
};
</script>

<style>
.boxs {
  width: 100%;
  height: 500px;
}
.boxs_left {
  width: 40%;
  height: 80%;
  float: left;
  margin: 5%;
  background-image: url(../../../../assets/image/home/paybg.png);
  background-position: center center;
  background-size: cover;
  border-radius: 10px;
  cursor: pointer;
}
.boxs_left:hover {
  box-shadow: inset 0px 0px 10px #fff, inset -10px 0px 20px #0ff,
    inset 0px 0px 20px #f0f, inset -10px 0px 20px #0ff, 0px 0px 10px #fff,
    -10px 0px 10px #f0f, 10px 0px 10px #0ff;
}
.boxs_right {
  width: 40%;
  height: 90%;
  float: left;

  margin-top: 5%;
}
.b_title {
  width: 86px;
  height: 24px;
  position: relative;
  left: 55%;
}
.b_form {
  width: 90%;
  height: 75%;

  position: relative;
  margin: 10%;
}
</style>
